import { getQuetionListApi } from '@/api'
import { Swiper } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import Fill from './components/Fill'
import Options from './components/Options'
import './practice.less'

const optionTypes = ['one', 'check', 'many']

export default function Practice() {
  // 获取state数据
  const location = useLocation()
  // console.log(location.state)

  const [state, setState] = useState<IQustion[]>([])

  useEffect(() => {
    getQuetionListApi(location.state).then(res => {
      if (res?.errCode == 0) {
        // 渲染
        setState(res.data)
      }
    })
  }, [])
  return (
    <div className='practice'>

      <div className="list">
        <Swiper >
          {
            state.map(item => <Swiper.Item key={item.id}>
              {
                optionTypes.includes(item.questionType) ? <Options data={item} /> : <Fill data={item} />
              }
            </Swiper.Item>)
          }
        </Swiper>

      </div>
    </div>
  )
}
